<template>
  <div class="custom_dialog">
    <el-form :ref="refForm" :rules="validate" :model="formModel" :label-width="labelWidth">
      <slot v-if="formModel" name="form_content" />
    </el-form>
    <div class="custom_dialog_footer ">
      <el-button class="pan-btn green-btn" icon="el-icon-success" @click="onSubmit">保存</el-button>
      <el-button class="pan-btn pink-btn" icon="el-icon-refresh-right" @click="onCancel">取消</el-button>
      <slot name="form_btn" />
    </div>
  </div>
</template>

<script>
import deepcopy from 'deepcopy'
export default {
  name: 'UserFrom',
  props: {
    formModel: {
      type: Object,
      default: () => {
        return {
          name: '',
          password: '',
          username: '',
          roleIds: ''
        }
      }
    },
    validate: {
      type: Object,
      default: () => {}
    },
    refForm: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: String,
      default: '80px'
    }
  },
  mounted() {

  },
  methods: {
    onSubmit() {
      this.$refs[this.refForm].validate((valid) => {
        if (valid) {
          this.$emit('onSubmit', deepcopy(this.formModel))
        }
      })
    },
    onCancel() {
      this.$emit('onCancel')
    }
  }
}
</script>

<style scoped>

</style>
